<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- <h1>{{ attrs.title }}</h1> -->
    <h1>{{ count }}</h1>
    <button @click="plus">增加</button>
  </div>
</template>

<script>
import { watchEffect, watch } from 'vue';

export default {
  name: 'Test',
  props: { // 如果不定义props 可以从context.attrs里取出
    title: String,
    count: Number
  },
  // emits: ['plus'],
  // setup({ title }) { // 不能解构props，否则会丧失响应式
  setup(props, context) {
    // 这个props里的数据已经是响应式的了，不需要再次包装 前提是不能解构
    // console.log(props);
    // const { title } = props;

    // 在当前这个组件中所传过来的props 不可更改 否则报警告 
    // 只能发事件到父组件里修改
    // props.title = '修改的数据'; // target is readonly.

    // watchEffect(() => { // 最初时也执行
    //   console.log('watchEffect title is: ' + props.title);
    // })

    // watch(() => { // 当变化的时候才执行
    //   return props.title; // return一个需要监听的对象
    // }, (newValue) => {
    //   console.log('watch:' + newValue);
    // });
    // 简写
    // watch(() => props.title, (newValue) => {
    //   console.log('watch:' + newValue);
    // });

    // ----------------------------------------------------

    // 第二个参数是执行上下文，是一个选项列表，抛出属性
    // console.log(context);
    // const { attrs, slots, emit } = context;
    // context.attrs
    // context.slots
    // context.emit

    // attrs\slots 都是在这个组件实例内部被代理后的值(响应式) 可以去解构它们
    // 这个值总是最新的 甚至在updates之后 不用担心旧的引用

    // context.emit
    // vue2 中是用 this.$emit()转递
    // vue3 中setup里没有this 使用context.emit()

    // console.log(this); // undefined

    const plus = () => {
      context.emit('plus', 100);
    }    

    return {
      // ...context.attrs, // 这样会丧失响应性
      // attrs: context.attrs,
      plus
    }
  }
}
</script>

<style>

</style>